import React, { Component } from "react";
import Child from "./Child";
import Child2 from "./Child2";

//todo 第二步，引入react-redux里面的connect
//todo connect是一个函数，这个函数的返回值是一个高阶组件
//todo 里面可以接受两个函数
import { connect } from "react-redux";

// 将仓库的数据映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    // 将仓库的count变成组件的props的count
    count: state.count,
    name: state.name,
  };
};

// 将仓库的reducer的方法映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add: function (n = 1) {
      dispatch({ type: "increment", n });
    },
    minus() {
      dispatch({ type: "decrement" });
    },
  };
};

class App extends Component {
  render() {
    return (
      <>
        <h2>react结合redux</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add()}>+1</button>
        <button onClick={() => this.props.add(2)}>+2</button>
        <button onClick={() => this.props.add(3)}>+3</button>
        <div>name: {this.props.name}</div>

        <hr />
        <Child />

        <hr />
        <Child2 />
      </>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
